<template>
  <div class="detail">
    <SonglistDetailDesc :songlistMsg="songlistMsg" />

    <keep-alive>
      <router-view
        :key="$route.fullPath"
        v-if="$route.meta.keepAlive"
        :songsIds="songsIdsStr"
      />
    </keep-alive>
    <keep-alive>
      <router-view
        :key="$route.fullPath"
        v-if="!$route.meta.keepAlive"
        :songsIds="songsIdsStr"
      />
    </keep-alive>

  </div>
</template>

<script>
import SonglistDetailDesc from "./childComps/SonglistDetailDesc";

import { home } from "@/network/home";

export default {
  name: "SongListDetail",
  components: {
    SonglistDetailDesc,
  },
  data() {
    return {
      songlistMsg: {}, //歌单描述
      songsIds: [], //单曲Id（数组形式）
      songsIdsStr: "", //单曲Id（字符串形式）
    };
  },
  created() {
    this.getSonglistDetail(this.$route.params.id);
  },
  watch:{
    '$route.path'(){
      this.getSonglistDetail(this.$route.params.id);
    },
  },
  methods: {
    getSonglistDetail(id) {
      home.getSonglistDetail(id).then((res) => {
        this.songlistMsg = res.data.playlist;
        //注意:外面一定要加一个判断，否则出现forEach undefined的错误
        //只有trackIds不为空时才进行下一次的操作
        if (res.data.playlist.trackIds) {
          this.songsIds = []  //重置id，防止叠加
          res.data.playlist.trackIds.forEach((item) => {
            this.songsIds.push(item.id);
            this.songsIdsStr = this.songsIds.join();
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.detail {
  position: fixed;
  left: 137px;
  top: 44px;
  bottom: 50px;
  right: 0;
  z-index: 0;
  overflow-y: hidden;
  background-color: #ffffff;
}
.detail:hover {
  overflow-y: overlay;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 4px;
  background-color: #dcefef;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #bbbbf1;
}
</style>
